/**
 * vue插件：注册全局指令
 */
// 导入监控方法
import { useIntersectionObserver } from '@vueuse/core'
import Def from '@/assets/images/load.gif'
export default {
  install (app) {
    app.directive('imglazy', {
      // vue2: inserted → vue3：mounted
      /**
       *
       * @param {*} el img的dom对象
       * @param {*} binding.value 指令绑定的图片地址
       */
      mounted (el, binding) {
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              el.src = Def
              el.src = binding.value
              // 加载失败
              el.onerror = () => {
                // 图片加载失败，显示默认图片
                el.src = Def
              }
              // 关闭监控
              stop()
            }
          },
          {
            threshold: 0// 进入后立马触发
          }
        )
      }
    })
  }
}
